<template>
	<div class="body">
		<!-- 商品详情页 -->
		<!-- <div class="header">
			<img @click="returnGo" src="../assets/homeimg/滑动左.png" />
			<span>商品详情</span>
		</div> -->
		<div class="body-c">
			<div class="banner">
				<swiper ref="mySwiper" :options="swiperOptions">
					<swiper-slide v-for="item in banners" :key="item">
						<img class="banner-img" :src="item" />
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
			<div class="top">
				<div class="jifen">
					<span class="sp">{{product.score}}积分</span>
					<span class="buy">{{product.sold_count}}人购买</span>
				</div>
				<div class="title">{{product.title}}</div>
			</div>
			<div class="choose">
				<div class="choose-c" @click="show = !show">
					<span>规格选择</span>
					<img src="../assets/homeimg/滑动右.png" alt />
				</div>
			</div>

			<div class="main">
				<div class="main-c">
					<p class="text">商品详情</p>
					<!-- <ul>
            <li class="img-list" v-for="image in obj.images" :key="image">
              <img :src="image" alt />
            </li>
          </ul>-->
					<div class="img-list" v-html="product.content"></div>

				</div>
			</div>
			<div class="bottom">
				<div class="btn" @click="tojisuan">立即兑换</div>
			</div>
		</div>
		<van-popup v-model="show" position="bottom" closeable>
			<div class="pop">
				<div class="top">
					<!-- <img class="goods" src="@/assets/homeimg/f2.jpg" alt=""> -->
					<img class="goods" :src="(currentSku && currentSku.image) || (product.images && product.images[0])" alt="">
					<div class="right">
						<!-- <div class="price">￥558</div> -->
						<div class="price">{{currentSku && currentSku.price}}</div>
						<div>库存：{{currentSku && currentSku.stock}} {{product.unit && product.unit.code}}</div>
					</div>
				</div>
				<div class="sku">
					<div class="sku_colmun" v-for="(item,index) in product.attrItems" :key="index">
						<div class="name">{{product.attrGroup[index]}}</div>
						<div class="item_group">
							<template v-for="(childItem, childIndex) in item">
								<div v-if="childItem.pid == item.id" :key="childIndex" class="sku_item"
								:class="{selected: attrChoose[index] === childIndex, disabled: skusStates[index][childIndex] == false}" @click="selectSpec(index, childIndex, item)">
									{{childItem}}
								</div>
							</template>
						</div>
					</div>
					<div class="num">
						<span>数量</span>
						<van-stepper v-if="currentSku" v-model="quantity" :max="currentSku.stock" disable-input />
					</div>	
				</div>
				<div class="footer" @click="submit(currentSku)" v-if="currentSku && currentSku.stock > 0">确定</div>
				<div class="footer" v-else>库存不足</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import integralApi from "@/api/integral";
	import {
		Toast
  } from "vant";
	export default {
		data() {
			return {
				id: null,//商品id
				sku_id: null,//选择规格id
				value: '',//数量
				banners: [],
				show: false,//规格弹窗显示
				show1: false,//规格弹窗显示
				swiperOptions: {
					pagination: {
						el: '.swiper-pagination'
					},
					// Some Swiper option/callback...
				},
				obj: {

				},
				product: {},
				quantity: 1,
				attrChoose: {},
				specClass: 'none',
				shareList: [],
				reviewList: [],
				couponList: [],
				couponVisible: 0,
				good_review: '100%',
				showLoadMore: false,
				review_page: 1,
				current_group_price: 0,
				skusValueAsKey: [],
				skusStates: []
			};
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.$swiper
			}
		},
		components: {},
		created() {
			
			// console.log(id);
			// this.getGoodDetail(id);
		},
		mounted() {
			this.id = this.$route.query.id;
			this.getGoodDetail(this.id);
			
		},
		computed:{
			currentSku() {
				let attrValues = []
				for (let i in this.attrChoose) {
					attrValues.push(this.product.attrItems[i][this.attrChoose[i]])
				}
				const val = attrValues.join(',')
				for (let i in this.product.skus) {
					if (this.product.skus[i].value == val) return this.product.skus[i]
				}
			}
		},
		watch:{
			currentSku: {
				handler(val) {
					this.getGroupPrice()
				},
				deep: true
			}
		},
		methods: {
			//获取商品详情
			async getGoodDetail(id) {
				let res = await integralApi.shopInfo({goods_id: id})
				this.product = res.data;
				this.sku_id = res.data.skus[0].id;//默认选中第一种规格
				this.banners = res.data.images;
				this.convertSkusKey(this.product.skus)
				this.specInit()
				// console.log('--->',this.product)
			},
			//确认兑换
			submit(sku){
				// console.log(sku)
				this.sku_id = sku.id
				this.show = false;
				// let data = {
				// 	goods_id: this.id,
				// 	num: this.quantity,
				// }
				// this.$store.commit('SAVE_ORDER',data)
				// this.$http.post('/api/score/sureSettle')
			},
			//规格弹窗开关
			getGroupPrice() {
				if (this.product.groupon) {
					let groupPrice = this.product.groupon.group_price
					this.current_group_price = groupPrice[this.currentSku.id]
				} else this.current_group_price = 0
			},
			//选择规格
			selectSpec(index, childIndex, item) {
				this.$set(this.attrChoose, index, childIndex)
				this.getSkusStates()
			},
			getSkusStates() {
				let result = []
				let data = this.attrChoose
				this.product.attrItems.forEach((item, index) => {
					let row = []
					item.forEach((subItem, subIndex) => {
						if (subIndex != data[index]) {
							let value = this.getSkuItem(index, subIndex, subItem)
							if (this.skusValueAsKey[value].stock <= 0) row[subIndex] = false
							else row[subIndex] = true
						} else {
							row[subIndex] = true
						}
					})
					result.push(row)
				})
				this.skusStates = result
			},
			getSkuItem(index, subIndex, subItem) {
				let result = []
				let data = this.attrChoose
				for (let key in data) {
					if (index == key) {
						result.push(subItem)
					} else {
						result.push(this.product.attrItems[key][data[key]])
					}
				}
				return result.join(',')
			},
			returnGo() {
				this.$router.go(-1);
			},
			tojisuan() {
				// Toast.success('点击结算了')
				if(!this.sku_id){
					Toast('请先选择规格')
					return
				}
				let data = {
					goods_id: this.id,
					num: this.quantity,
					sku_id: this.sku_id
				}
				this.$http.post('/api/score/settle',data).then(res => {
					// console.log(res)
					this.$store.commit('SAVE_ORDER',res.data)
					this.$router.push("/jisuan");
				})
				
			},
			convertSkusKey(skus) {
				skus.forEach((item, index) => {
					this.skusValueAsKey[item.value] = item
				})
				
			},
			specInit() {
				for (let index in this.product.attrGroup) {
					this.$set(this.attrChoose, index, 0)
				}
				this.getSkusStates()
			},
		}
	};
</script>

<style scoped lang="scss">
	.body {
		color: #333333;
		height: 100%;
		display: flex;
		position: relative;
		flex-direction: column;
		background: rgba(250, 250, 250, 1);
		background-size: 100% 100%;
	}
	.pop{
		padding: 4vw;
		box-sizing: border-box;
		.top{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.goods{
				width: 21.33vw;
				height: 21.33vw;
				margin-right: 4vw;
			}
			.right{
				font-size:12px;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(101,101,101,1);
				.price{
					font-weight:500;
					color:rgba(230,42,42,1);	
					margin-bottom: 2vw;
				}
			}
		} 
		.sku{
			margin-top: 6.6vw;
			.sku_colmun{
				.name{
					font-size:14px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
				.item_group{
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					margin-top: 4.1vw;
					.sku_item{
						margin-right: 2.6vw;
						font-size:12px;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
						padding: 2vw 6vw;
						box-sizing: border-box;
						background:rgba(243,245,251,1);
						border-radius:27px; 
					}
					.selected {
						background: #fbebee;
						color: red;
					}
					.disabled {
					background: #EFEEEE;
					color: #B1B1B1;
				}
				}
			}
			.num{
				margin-top: 13.33vw;
				display: flex;
				justify-content: space-between;
				align-items: center;
				span{
					font-size:14px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
			}
		}
		.footer{
			margin: 10vw auto 0;
			width:92vw;
			height:11.73vw;
			background:rgba(253,119,73,1);
			border-radius:44px;
			line-height: 11.73vw;
			text-align: center;
			font-size:18px;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,255,255,1);
		}
	}
	.header {
		position: fixed;
		top: 0;
		left: 0;
		flex: 1;
		width: 100%;
		height: 3.125rem;
		background: #fff;
		line-height: 3.125rem;
		color: #333333;
		font-size: 1.25rem;
		z-index: 99;
		text-align: center;
		img {
			position: absolute;
			bottom: 0.75rem;
			left: 0.9375rem;
			width: 0.625rem;
			height: 1.125rem;
		}

	}
    // 在scss文件中
    @supports(bottom:constant(safe-area-inset-top)) {
    
    	// 如果存在底部安全区域
    	.header {
    		padding-top: constant(safe-area-inset-top);
    
    	}
    
    }
    
    @supports(bottom:env(safe-area-inset-top)) {
    
    	// 如果存在底部安全区域
    	.header {
    		padding-top: env(safe-area-inset-top);
    
    	}
    
    }
	.body-c {
		width: 100%;
		// margin-top: 3.125rem;
		padding-bottom: 100px;
	}

	.banner {
		width: 100%;
		height: 14.375rem;

		/deep/ .swiper-container {
			width: 100%;
			height: 100%;

			.swiper-pagination {
				position: absolute;
				bottom: 0.3125rem;
				// left: 6.25rem;
				margin: 0 auto;

				.swiper-pagination-bullet {
					background-color: #333333;
					opacity: .5;
				}

				.swiper-pagination-bullet-active {
					background-color: #333333;
					opacity: 1;
				}
			}
		}

		.banner-img {
			width: 100%;
			height: 100%;
		}
	}

	.top {
		width: 100%;
		height: 4.375rem;
		background: rgba(255, 255, 255, 1);
		border-radius: 0px 0px 10px 10px;

		.jifen {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.sp {
				font-size: 0.9375rem;
				font-weight: 500;
				color: rgba(255, 38, 79, 1);
				font-family: PingFangSC;
				line-height: 2.1875rem;
			}

			.buy {
				font-size: 0.75rem;
				font-weight: 400;
				font-family: PingFangSC;
				color: rgba(102, 102, 102, 1);
				line-height: 2.1875rem;
			}
		}

		.title {
			width: 90%;
			margin: 0 auto;
			font-size: 0.875rem;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: rgba(51, 51, 51, 1);
			line-height: 1.125rem;
		}
	}

	.choose {
		width: 21.5625rem;
		height: 2.75rem;
		margin: 0 auto;
		margin-top: 1.25rem;
		background: rgba(255, 255, 255, 1);
		border-radius: 0.3125rem;

		.choose-c {
			width: 90%;
			height: 100%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			span {
				font-size: 0.9375rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				line-height: 2.75rem;
			}

			img {
				width: 0.4375rem;
				height: 0.6875rem;
				margin-top: 1rem;
			}
		}
	}

	.main {
		width: 100%;

		.main-c {
			width: 21.5625rem;
			margin: 0 auto;
			margin-top: 0.625rem;

			.text {
				text-align: center;
				font-size: 1rem;
				letter-spacing: 0.1875rem;
				font-weight: bold;
				color: #333333;
				line-height: 2.1875rem;
			}

			ul {
				width: 100%;
			}


		}
	}
    .bottom{
		width: 100%;
		height: 3.125rem;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: 10px;
		box-sizing: border-box;
	}
	.btn {
		width: 15rem;
		height: 2.25rem;
		margin: 0 auto;
		margin-top: 0.4375rem;
		background: linear-gradient(90deg,
			rgba(255, 208, 65, 1) 0%,
			rgba(255, 178, 9, 1) 100%);
		border-radius: 1.125rem;
		font-size: 0.9375rem;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: rgba(255, 255, 255, 1);
		line-height: 2.25rem;
		text-align: center;
	}

	.img-list {
		width: 100%;
		// height: 11.875rem !important;
		margin-bottom: 0.625rem;
		border-radius: 0.3125rem 0.3125rem 0px 0px;
        
		p {
			display: block;
			width: 100%;

			// height: 100%;
			/deep/img {
				display: block;
				width: 100%;
				height: 11.875rem;
			}
		}
	}
</style>
